<template>
	<view class="container">
		<view class="content-bg" :style='{"background-image":"url("+imgUrl+")"}'>
			<view class="bg-mask"></view>
			<view class="title text-lg text-white">{{groupCourseInfo.title}}</view>
		</view>
		<view class="content-container padding-left padding-right">
			<view class="content primary-bg text-white">
				<view class="coach-container flex align-center">
					<view class="avatar">
						<image class="avatar-image" :src="groupCourseInfo.coach_cover_url" mode="aspectFill"></image>
					</view>
					<view class="coach-info margin-left">
						<view class="name">{{groupCourseInfo.coach_name}}</view>
						<view class="brief-intro text-gray text-sm margin-top-xs">{{groupCourseInfo.coach_brief_intro}}</view>
					</view>
				</view>
				<view class="list-container">
					<view class="item flex justify-between mt40">
						<view class="label text-gray">价格</view>
						<view class="value text-orange text-lg">{{groupCourseInfo.price}}</view>
					</view>
					<view class="item flex justify-between mt40">
						<view class="label text-gray">上课时间</view>
						<view class="value text-orange">{{groupCourseInfo.full_course_time}}</view>
					</view>
					<view class="item flex justify-between mt40">
						<view class="label text-gray">所在门店</view>
						<view class="value text-orange">{{groupCourseInfo.shop_name}}</view>
					</view>
					<view @tap="location(groupCourseInfo)" class="item flex justify-between mt40">
						<view class="label text-gray">上课地点</view>
						<view class="value">
							<text class="text-orange">{{groupCourseInfo.shop_address}}</text>
							<text class="cuIcon-right text-orange"></text>
						</view>
					</view>
					<view class="item flex justify-between mt40">
						<view class="label text-gray">上课人数</view>
						<view class="value text-orange">{{groupCourseInfo.people_number}}</view>
					</view>
					<view class="item flex justify-between mt40">
						<view class="label text-gray">最近预约</view>
						<view v-if="!groupCourseInfo.order_users.length > 0" class="value text-orange">暂无人预约</view>
						<view v-else class="image-list">
							<image v-for="(item, index) in groupCourseInfo.order_users" :key="index" :src="item.cover_url" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="input-container">
					<view class="item flex align-center margin-top">
						<view class="label text-gray">姓名</view>
						<view class="input margin-left">
							<input type="text" v-model="username" placeholder="请输入姓名" />
						</view>
					</view>
					<view class="item flex align-center mt40">
						<view class="label text-gray">手机号码</view>
						<view class="input margin-left">
							<input type="text" v-model="phone" placeholder="请输入手机号码" />
						</view>
					</view>
				</view>
				<view class="text-olive text-xs margin-top">* 截止报名时间：{{groupCourseInfo.end_order_time}}</view>
			</view>
			<view @tap="orderGroupCourse(groupCourseInfo)" class="order-btn">我要预约</view>
		</view>
	</view>
</template>

<script>
import util from '@/utils/util.js';
import groupCourse from '@/api/group_course.js';
import groupCourseOrder from '@/api/group_course_order.js';

export default {
	data() {
		return {
			imgUrl: '',
			groupCourseInfo: {},
			username: '',
			phone: '',
		}
	},
	onLoad(options) {
		this.initUserInfo();
		this.getGroupCourseInfo(options.id);
	},
	methods: {
		initUserInfo() {
			const userInfo = uni.getStorageSync('user_info');
			this.username = userInfo.realname;
			this.phone = userInfo.phone;
		},
		async getGroupCourseInfo(id) {
			const res = await groupCourse.show(id);
			this.groupCourseInfo = res.data;
			this.imgUrl = this.groupCourseInfo.cover_url;
		},
		orderGroupCourse(groupCourse) {
			const _this = this;
			uni.showModal({
				title: '提示',
				content: '确定要预约吗？',
				success: async function (res) {
					if (res.confirm) {
						if (_this.username.trim() === '') {
							uni.showToast({
								title: '请填写姓名',
								icon: 'none'
							});
							return false;
						}
						if (_this.phone.trim() === '') {
							uni.showToast({
								title: '请填写手机号码',
								icon: 'none'
							});
							return false;
						}
						uni.login({
							provider: 'weixin',
							success: async function (loginRes) {
								const res = await groupCourseOrder.store({code: loginRes.code, group_course_id: groupCourse.id, username: _this.username, phone: _this.phone});
								if (!res.data.pay_params) {
									uni.showModal({
										title: '成功提醒',
										content: '预约成功',
										showCancel: false,
										confirmText: '立即查看',
										success(action) {
											if (action.confirm) {
												util.toGroupCourseOrder();
											}
										}
									});
								} else {
									let payParams = res.data.pay_params;
									let order = res.data.order;
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: String(payParams.timeStamp),
										nonceStr: payParams.nonceStr,
										package: payParams.package,
										signType: payParams.signType,
										paySign: payParams.paySign,
										success: function (res) {
											if (res.errMsg === 'requestPayment:ok') {
												uni.showToast({
													title: '支付成功，正在查询订单状态',
													icon: 'none'
												}, 1000);
												_this.queryOrderStatus(order.id);
											}
										},
										fail: function (err) {
											uni.showToast({
												title: '支付失败',
												icon: 'none'
											}, 1000);
										}
									});
								}
							}
						});
					}
				}
			})
		},
		async queryOrderStatus(id) {
			const res = await groupCourseOrder.show(id, {type: 'pay_status'});
			if (res.data.is_paid) {
				uni.showModal({
					title: '成功提醒',
					content: '预约成功',
					showCancel: false,
					confirmText: '立即查看',
					success(action) {
						if (action.confirm) {
							util.toGroupCourseOrder();
						}
					}
				});
			} else {
				uni.showModal({
					title: '失败提醒',
					content: '查询支付状态失败，请稍后到我的团课查看',
					showCancel: false,
					confirmText: '我知道了',
					success(action) {
						if (action.confirm) {
							util.toHome(true);
						}
					}
				});
			}
		},
		location(groupCourseInfo) {
			let latitude = groupCourseInfo.shop_latitude;
			let longitude = groupCourseInfo.shop_longitude;
			let name = groupCourseInfo.shop_name;
			let address = groupCourseInfo.shop_address;
			uni.getLocation({
			    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			    success: function (res) {
			        uni.openLocation({
			            latitude: latitude,
			            longitude: longitude,
						name: name,
						address: address
			        });
			    }
			});
		}
	}
}
</script>

<style scoped lang="less">
.container {
	.content-bg {
		background-size: cover;
		background-position: top top;
		width: 100%;
		height: 375upx;
		position: relative;
		.bg-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.3);
		}
		.title {
			position: absolute;
			top: 60upx;
			width: 100%;
			text-align: center;
		}
	}
	.content-container {
		position: absolute;
		top: 170upx;
		width: 100%;
		.content {
			padding: 30upx 30upx 30upx 30upx;
			border-top-left-radius: 10upx;
			border-top-right-radius: 10upx;
			.coach-container {
				padding-bottom: 30upx;
				border-bottom: 1px solid #000000;
				.avatar {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					.avatar-image {
						height: 100%;
						border-radius: 50%;
					}
				}
			}
			.list-container {
				padding-bottom: 40upx;
				border-bottom: 1px solid #000000;
			}
			.input-container {
				.label {
					width: 150upx;
				}
			}
		}
		.order-btn {
			background-color: #f37b1d;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			color: #FFFFFF;
			border-bottom-left-radius: 10upx;
			border-bottom-right-radius: 10upx;
		}
	}
}
</style>
